<template>
	<view>
		<u-cell :title="title">
			<u-icon slot="icon" size="16" :name="icon" @click="clickIcon"></u-icon>

			<view slot="value" class="u-slot-value">
				<view v-if="isSwitch">
					<u-switch :disabled="disabled" v-model="myValue" @change="change" :inactive-value="false" :active-value="true" activeColor="#f3c45d" size="20" />
				</view>
				<u-radio-group v-if="isRadio" v-model="myValue" @change="groupChange">
					<u-radio
						activeColor="#f3c45d"
						:customStyle="{ marginLeft: '10px' }"
						v-for="(item, index) in radiolist"
						:key="item.value"
						:label="item.name"
						:name="item.value"
						:value="item.value"
					></u-radio>
				</u-radio-group>

				<slot v-if="isSlot"></slot>
			</view>
		</u-cell>
	</view>
</template>

<script>
export default {
	data() {
		return {
			myValue: this.value || (this.isSwitch ? false : 1)
		};
	},
	props: {
		title: {
			default: '',
			type: String,
			required: true
		},
		isSlot: {
			default: false,
			type: Boolean,
			required: false
		},
		isSwitch: {
			default: false,
			type: Boolean,
			required: false
		},
		isRadio: {
			default: false,
			type: Boolean,
			required: false
		},
		radiolist: {
			type: Array,
			default: [],
			required: false
		},
		disabled: {
			type: Boolean,
			default: false,
			required: false
		},
		icon: {
			type: String,
			default: '',
			required: false
		},
		showIcon: {
			type: Boolean,
			default: false,
			required: false
		},
		value: {}
	},
	mounted() {
		this.myValue = this.value;
	},
	methods: {
		change() {
			this.$emit('input', this.myValue); // 手动触发事件，传递更新的值
		},
		// 单选框值变化时触发
		groupChange() {
			this.$emit('input', this.myValue); // 传递选择的单选框值
		},
		clickIcon() {
			this.$emit('clickIcon');
		}
	}
};
</script>

<style></style>
